
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="/admin/themes/simplebootx/Public/css/bootstrap.min.css" rel="stylesheet">
    <script src="/admin/themes/simplebootx/Public/js/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="/admin/themes/simplebootx/Public/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/admin/themes/simplebootx/Public/jquery.validate.js"></script>
    <script src="/admin/themes/simplebootx/Public/additional-methods.js"></script>
    <script src="/admin/themes/simplebootx/Public/messages_zh.js"></script>

</head>
<body>

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            添加游学
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">行程列表</a></li>

    <li><a href="#java" data-toggle="tab">行程亮点</a></li>

</ul>
<form id="form" method="post" action="{:U('indexadmin/add_xy')}" enctype="multipart/form-data" style="text-align: center"  >
<div id="myTabContent" class="tab-content">
    <!--第一页-->
    <div class="tab-pane fade in active" id="home" style="text-align: center;margin-top: 80px;">
                 <span style="position: absolute;top: 70px;left: 400px">
                <label>添加图片：</label><input type="file" name="img[]">
           </span>

           <label>标  &nbsp;&nbsp;&nbsp;&nbsp;题：</label><input id="in_1" name="xl_Title"><br><br>
           <label>标题详情：</label><input name="Title_xq"><br><br>
           <label>价  &nbsp;&nbsp;&nbsp;&nbsp;格：</label><input name="money"><br><br>
           <label>出发城市：</label><input name="cf_city"><br><br>
           <label>线路类型：</label><input name="xl_type"><br><br>
           <label>招生对象：</label><input name="zs_object"><br><br>
           <label>截止日期：</label><input style="width: 180px" type="date" name="jzDate" value="2017-04-30" min="2000-04-30" max="2300-0-26"/>
    </div>

    <!--第二页-->
    <div  class="tab-pane fade" id="ios" style="text-align:center;margin-top: 80px;">
        <a href="#" id="AddMoreFileBox" class="btn btn-info" style="position: relative;float: right;top: 25px;right: 20px">+</a>
         <div id="InputsWrapper" >
             <div style="margin: 0 auto;width: 700px;height: 100px;color: white;background-color: #1a1a1a">
             <label>标题：</label><input  name="day[]" style="width: 25%;border: 0;background-color: rgba(148, 148, 148, 0.62)">
             <label>住宿：</label><input name="zs[]" style="width: 20%;border: 0;background-color: rgba(134, 134, 134, 0.62)">
             <label>内容：</label><textarea name="xc_content[]" style="width: 25%;height:25px;position: relative;top: 5px;resize: none;border: 0;background-color: rgba(128, 128, 128, 0.62)"></textarea>
             <br>
                 <div style="text-align: center;">
                     <input type="hidden" name="smeta[thumb]" id="thumb" value="">
                     <a href="javascript:upload_one_image('图片上传','#thumb');">
                         <img src="__TMPL__Public/assets/images/default-thumbnail.png" id="thumb-preview" width="135" style="cursor: hand" />
                     </a>
                     <input type="button" class="btn btn-small" onclick="$('#thumb-preview').attr('src','__TMPL__Public/assets/images/default-thumbnail.png');$('#thumb').val('');return false;" value="取消图片">
                 </div>
             </span>
             </div>
             <br>
         </div>
    </div>

    <!--第三页-->
    <div class="tab-pane fade" id="java" style="text-align: center;margin-top: 80px;">
        <a href="#" id="Add" class="btn btn-info" style="position: relative;float: right;top: 25px;right: 20px">+</a>
        <div id="Input" >
        <div style="margin: 0 auto;width: 500px;height: 80px;color: white;background-color: #1a1a1a">
                  <label>标题:</label><input name="xc_Title[]" style="border: 0;background-color: rgba(134, 134, 134, 0.62)">
                  <label style="">内容:</label><textarea name="ld_content[]" style="position: relative;top: 15px;resize: none;border: 0;background-color: rgba(134, 134, 134, 0.62)"></textarea>
            </div>
            <br>
</div>
    </div>


</div>

    <button id="btn_a" type="submit" style="width: 150px;background-color: #3d990f;color: white">提交</button>
</form>

<script type="text/javascript">

    $(function () {



    })
   //循环列表
    $(document).ready(function() {

        var MaxInputs       = 19; //maximum input boxes allowed
        var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
        var AddButton       = $("#AddMoreFileBox"); //Add button ID

        var x = InputsWrapper.length; //initlal text box count
        var FieldCount=1; //to keep track of text box added

        $(AddButton).click(function (e)  //on add input button click
        {
            if(x <= MaxInputs) //max input box allowed
            {
                FieldCount++; //text box added increment
                //add input box
                $(InputsWrapper).append('<span><div id="s" style="margin: 0 auto;width: 700px;height: 100px;color: white;background-color: #1a1a1a">'+
                       '<label>标题：</label><input  name="day[]" style="width: 25%;border: 0;background-color: rgba(148, 148, 148, 0.62)">'+
                '<label>住宿：</label><input name="zs[]" style="width: 20%;border: 0;background-color: rgba(134, 134, 134, 0.62)">'+
                '<label>内容：</label><textarea name="xc_content[]" style="width: 25%;height:25px;position: relative;top: 5px;resize: none;border: 0;background-color: rgba(128, 128, 128, 0.62)"></textarea>'+
                '<br>'+
                       " <div style='text-align: center;'>"+
                            "<input type='hidden' name='smeta[thumb]' id='thumb' value=''>"+
                                "<a href='javascript:upload_one_image('图片上传','#thumb');'>"+
                                   " <img src="__TMPL__Public/assets/images/default-thumbnail.png" id="thumb-preview width='135' style='cursor: hand' />"+
                                </a>
                                <input type="button" class="btn btn-small" onclick="$('#thumb-preview').attr('src','__TMPL__Public/assets/images/default-thumbnail.png');$('#thumb').val('');return false;" value="取消图片">
                        </div>;
                x++; //text box increment
            }
            return false;
        });

        $("body").on("click",".removeclass", function(e){ //user click on remove text
            if( x > 1 ) {
                $(this).parent('span').remove(); //remove text box
                x--; //decrement textbox
            }
            return false;
        })

    });
    $(document).ready(function() {

        var MaxInputs       = 19; //maximum input boxes allowed
        var InputsWrapper   = $("#Input"); //Input boxes wrapper ID
        var AddButton       = $("#Add"); //Add button ID

        var x = InputsWrapper.length; //initlal text box count
        var FieldCount=1; //to keep track of text box added

        $(AddButton).click(function (e)  //on add input button click
        {
            if(x <= MaxInputs) //max input box allowed
            {
                FieldCount++; //text box added increment
                //add input box
                $(InputsWrapper).append('<span><div style="margin: 0 auto;width: 500px;height: 80px;color: white;background-color: #1a1a1a">'+
                        '<label>标题:</label><input name="xc_Title[]" style="border: 0;background-color: rgba(134, 134, 134, 0.62)">'+
                '<label style="">内容:</label><textarea name="ld_content[]" style="position: relative;top: 15px;resize: none;border: 0;background-color: rgba(134, 134, 134, 0.62)"></textarea>'+
                '</div>'+
                '<a href="#" class="removeclass" style="background-color: #1a1a1a;" type="btn" >取消</a></span>');
                x++; //text box increment
            }
            return false;
        });

        $("body").on("click",".removeclass", function(e){ //user click on remove text
            if( x > 1 ) {
                $(this).parent('span').remove(); //remove text box
                x--; //decrement textbox
            }
            return false;
        })

    });
</script>
</body>
</html>